<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="${ctx}/css/sapar.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/css/common.css"/>
    <script type="text/javascript" src="${ctx}/js/jquery.js"></script>
    <script type="text/javascript" src="${ctx}/js/sapar.js"></script>
    <script type="text/javascript" src="${ctx}/js/WdatePicker.js"></script>
    <script type="text/javascript" src="${ctx}/assets/layer/layer.js"></script>
    <script type="text/javascript" src="${ctx}/js/kkpager.min.js"></script>
    <script type="text/javascript" src="${ctx}/js/mask.js"></script>
    <link rel="stylesheet" type="text/css" href="${ctx}/css/kkpager_blue.css"/>
    <title>新增清洗</title>
    <style type="text/css">
        #second {
            width: 50%;
            height: 100%;
            border: 1px solid #bdd0db;
        }

        #detail {
            height: 100%;
            margin-top: 0px;
        }
    </style>
</head>

<body>
<!-- 遮罩层 -->
<div id="mask" class="mask"></div>
<div id="saper-container">
    <div id="saper-hd"></div>
    <div id="saper-bd">
        <audio src="../audio/Beep_Short.mp3" id="audio"></audio><!-- 成功提示音 -->
        <audio src="../audio/Alarm_Clock (1).mp3" id="audio1"></audio><!-- 失败提示音 -->
        <form class="saper-form">
            <div class="subfiled clearfix">
                <h2>新增清洗</h2>
            </div>
            <div class="subfiled-content">

                <div class="kv-item clearfix">
                    <!-- <label>清洗设备：</label>
                    <div class="kv-item-content">
                        <input type="text" placeholder="清洗设备" name="qingxiShebeiName" readonly="readonly"/>
                        <input type="hidden" name="qingxiShebeiTiaoma"/>
                    </div> -->

                    <label>清洗程序：</label>
                    <div class="kv-item-content">
                        <input type="text" placeholder="清洗程序" name="ruanjian" id="ruanjian" autofocus="autofocus">
                        <input type="hidden" name="qingxiRuanjianTiaoma"/>
                    </div>

                    <label>网篮条码：</label>
                    <div class="kv-item-content">
                        <input type="text" placeholder="网篮条码" name="wanglan" id="wanglan"/>
                    </div>

                    <label>清洗人：</label>
                    <div class="kv-item-content">
                        <input type="text" placeholder="清洗人" name="qingxiren" id="qingxiren">
                    </div>
                    <label></label>
                    <div class="kv-item-content">
                        <a class="sapar-btn sapar-btn-recom query-btn" href="javascript:;" id="save">保存</a>
                    </div>
                </div>
            </div>
            <div class="subfiled clearfix">
                <h2>网篮条码</h2>
            </div>
            <div class="subfiled-content">
                <div class="table-box">
                    <table>
                        <tr valign="top">
                            <td width="50%" valign="top">
                                <div class="table" id="lefttable">
                                    <table id="detail">
                                        <thead>
                                        <tr>
                                            <th>设备编码</th>
                                            <th>设备名称</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </td>
                            <td width="20px"></td>
                            <td width="500px" valign="top" id="second">
                                <div class="table" id="three">
                                    <table id="detail1">
                                        <thead>
                                        <tr>
                                            <th>程序编码</th>
                                            <th>清洗程序</th>
                                        </tr>
                                        </thead>
                                        <tbody id="five">

                                        </tbody>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!--表格开始-->
                <%--
                     <!--表格具体内容-->
                    <table border="1" >
                            <tr valign="top">
                            <td width="50%" valign="top">
                             <div class="table" id="lefttable">
                                 <table>
                                     <thead>
                                         <tr>
                                             <th>设备编码</th>
                                             <th>设备名称</th>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         <c:if test="${equipList != null}">
                                     <!-- var 是给给他起名字 -->
                                             <c:forEach items="${equipList}" var="equip">
                                                 <tr data="${equip.equipId}" id="${equip.equipId}" class="equipdata">
                                                     <td>${equip.equipId}</td>
                                                     <td>${equip.equipName}</td>
                                                 </tr>
                                             </c:forEach>
                                         </c:if>
                                     </tbody>
                                 </table>
                             </div>
                            </td>
                            <td width="20px"></td>
                            <td width="500px" valign="top" id="second">
                                <div class="table"  id="lefttable">
                                 <table id="detail" >
                                     <thead>
                                         <tr>
                                             <th>程序编码</th>
                                             <th>清洗程序</th>
                                         </tr>
                                     </thead>
                                     <tbody id="five">

                                     </tbody>
                                 </table>
                             </div>
                            </td>
                            </tr>
                    </table>  --%>

                <!--表格结束-->

                <!--分页开始-->

            </div>
            <div>
                <div style="float: left;width: 50%">
                    <div class="subfiled clearfix">
                        <h2>未选择网篮</h2>
                    </div>
                    <div class="table">
                        <table id="tpaTable">
                            <thead>
                            <tr>
                                <th><input type="checkbox" id="quanxuanBox"></th>
                                <th>网篮条码</th>
                                <th>网篮名称</th>
                                <th>明细</th>

                            </tr>
                            </thead>
                            <tbody id="tpaTableBody">
                            <c:if test="${wanglanList !=null }">
                                <c:forEach items="${wanglanList}" var="huishouWanglan">
                                    <tr class="wanglanXinxi">
                                        <td>
                                            <input type="checkbox" name="qingxiWanglanTiaoma"
                                                   value="${huishouWanglan.wlTiaoma}"/>
                                        </td>
                                        <td>${huishouWanglan.wlTiaoma }</td>
                                        <td>${huishouWanglan.wlMingcheng }</td>
                                        <td><a href="javascript:;" class="wlMingxi">查看明细</a></td>

                                    </tr>
                                </c:forEach>
                            </c:if>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div style="float: left;width: 50%">
                    <div class="subfiled clearfix">
                        <h2>已选择网篮</h2>
                    </div>
                    <div class="table" >
                        <table id="okPackage">
                            <thead>
                            <tr>
                                <th><input type="checkbox" ></th>
                                <th>网篮条码</th>
                                <th>网篮名称</th>
                                <th>明细</th>

                            </tr>
                            </thead>
                            <tbody >

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </form>
    </div>
    <div id="saper-ft"></div>
</div>

</body>

<script type="text/javascript">
    //全选
    $("#quanxuanBox").click(function () {
        $("#tpaTableBody").find("input").each(function () {
            ck = $(this);
            if (ck.prop('checked')) {
                ck.prop('checked', false);
            } else {
                ck.prop('checked', true);
            }
        });

    })


    //判断是否为空
    function isNullOrEmpty(strVal) {
        if (strVal != null) {
            strVal = strVal.replace(/(^\s*)|(\s*$)/g, "");
        }
        if (strVal == '' || strVal == null || strVal == undefined) {
            return true;
        } else {
            return false;
        }
    }


    //保存
    $(".query-btn").click(function () {
        var success = true;
        var ck = getSelRecord();
        if (ck.length == 0) {
            success = false;
            layer.msg("请选择网篮");
        }

        var qingxiRuanjianTiaoma = $("#ruanjian").val();

        var qingxiQingxirenTiaoma = $("#qingxiren").val();
        if (isNullOrEmpty(qingxiQingxirenTiaoma)) {
            success = false;
            layer.msg("清洗人不能为空");
        }
        if (isNullOrEmpty(qingxiRuanjianTiaoma)) {
            success = false;
            layer.msg("清洗软件条码不能为空");

        }

        if (success) {
            showMask();
            $.ajax({
                type: "POST",
                url: "${ctx}/qingxi/save.do",
                data: $('.saper-form').serialize(),// 你的formid
                error: function (request) {
                    layer.alert("网络故障，请稍后再试!");
                },
                success: function (data) {
                    if (data.status == "true") {
                        layer.alert("添加成功,点击确定继续添加", function (index) {
                            window.location.href = "${ctx}/qingxi/qingxiInput.do";
                        });

                        hideMask();

                    } else {
                        hideMask();
                        layer.msg(data.msg);
                    }
                }
            });
        } else {

        }

    })


    $('select').iSelect();

    $(".softdata").live("click", function () {
        $(this).addClass("xuanzhong").siblings().removeClass("xuanzhong");
    })

    $("#save").mouseover(function () {
        $("#save").css("background", "#467735");
    })

    $("#save").mouseleave(function () {
        $("#save").css("background", "#6ab96e");
    })


    //点击加载设备软件信息
    $(".equipdata").click(function () {
        //讲点击的设备信息传送到 from表单 输入框中
        $(this).addClass("xuanzhong").siblings().removeClass("xuanzhong");
        var equipTiaoma = $(this).find("td").eq(0).html();
        var equipName = $(this).find("td").eq(1).html();
        $('input[name="qingxiShebeiTiaoma"]').val(equipTiaoma);
        $('input[name="qingxiShebeiName"]').val(equipName);
        var equipId = $(this).attr("data");
        $.ajax({
            type: "post",
            url: "${ctx}/qingxi/softMingxiList.do?id=" + equipId,
            error: function () {
                layer.alert("网络故障，稍后再试");
            },
            success: function (data) {
                if (data.status == "true") {
                    console.log(data);
                    var dataList = data.softList;
                    var str = '';
                    $("#detail tbody").empty();
                    for (var i = 0; i < dataList.length; i++) {
                        str += "<tr class='softdata'  id='" + dataList[i].softId + "' ><td >" + dataList[i].softId + "</td><td>" + dataList[i].softName + "</td></tr>";
                    }
                    $("#detail tbody").append(str);
                } else {
                    layer.msg(data.msg);
                }
            }
        });
    });

    function getSelRecord() {
        var chk_value = [];
        $('input[name="qingxiWanglanTiaoma"]:checked').each(function () {
            chk_value.push($(this).val());
        });
        return chk_value;
    }


    $(".softdata").live("click", function () {
        var softName = $(this).find("td").eq(1).html();
        var softId = $(this).find("td").eq(0).html();
        $('input[name="qingxiRuanjianName"]').val(softName);
        $('input[name="qingxiRuanjianTiaoma"]').val(softId);
        layer.open({
            type: 2,
            title: '清洗扫码',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['800px', '520px'],
            content: '${ctx}/page/qxxd/qingxi_barcode.jsp'
        });
    })

    $(".wlMingxi").click(function () {
        var wltm = $(this).parent().parent().find('input[name="qingxiWanglanTiaoma"]').val();
        var wanlanMingcheng = $(this).parent().parent().find('td').eq(1).html();
        layer.open({
            type: 2,
            title: wanlanMingcheng + '明细',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['800px', '520px'],
            content: '${ctx}/qingxi/findwanglanList.do?wltm=' + wltm
        });

    });

    function callbackWlData(lanArray) {
        console.log(lanArray);

        $('input[name="qingxiWanglanTiaoma"]').each(function () {
            var lan = $(this).val();
            for (var i = 0; i < lanArray.length; i++) {
                var lanTm = lanArray[i].lan;
                if (lan == lanTm) {
                    $(this).prop('checked', true);
                }

            }

        });


    }

    var isover = 0;
    var lan = null;
    var lanArray = new Array();
    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        var oPlay0 = document.getElementById("audio");
        var oPlay1 = document.getElementById("audio1");
        if (e && e.keyCode == 27) { // 按 Esc
            //要做的事情
        }
        if (e && e.keyCode == 113) { // 按 F2
            //要做的事情
        }
        if (e && e.keyCode == 13) { // enter 键
            var isFocus = $("#ruanjian").is(":focus");
            var wanglanFocus = $("#wanglan").is(":focus");
            var renFocus = $("#qingxiren").is(":focus");
            if (true == isFocus) {
                var rj = $("#ruanjian").val();
                if (rj != null) {
                    $.ajax({
                        type: "POST",
                        url: "${ctx}/soft/qingxiSoft.do?softId=" + rj,
                        error: function (request) {
                            layer.alert("网络故障，请稍后再试!");
                        },
                        success: function (data) {
                            if (data.state == "true") {
                                var str = '';
                                $("#detail tbody").empty();
                                var str = "<tr><td>" + data.equip.equipId + "</td><td>" + data.equip.equipName + "</td></tr>";
                                $("#detail tbody").append(str);
                                var str1 = '';
                                $("#detail1 tbody").empty();
                                var str1 = "<tr><td>" + data.soft.softId + "</td><td>" + data.soft.softName + "</td></tr>";
                                $("#detail1 tbody").append(str1);
                                if (true == isFocus) {
                                    $("#wanglan").focus();
                                    var flag = true;
                                    if (flag) {
                                        oPlay0.play();
                                        i = 2;
                                    }
                                }
                            } else {
                                oPlay1.play();
                                $("#ruanjian").val('');
                                $("#ruanjian").focus();
                            }
                        }
                    });
                }
            } else if (wanglanFocus == true) {
                lan = $("#wanglan").val();
                console.log(lan);
                if (lan == ('STOP')) {
                    $("#qingxiren").focus();
                    oPlay0.play();
                } else if (lan != null) {
                    var flag = false;
                    console.log(flag)
                    $('input[name="qingxiWanglanTiaoma"]').each(function () {
                        if ($(this).val() == lan) {
                            flag = true;
                            lanArray.push(lan);
                            // 清空配包的属性
                            lan = null;
                            var that = this;
                            $(that).prop('checked', true);
                            $("#okPackage").append($(that).parent().parent().clone());
                            $(that).parent().parent().remove();


                        }

                    });
                    console.log(flag);
                    if (flag) {
                        oPlay0.play();

                    } else {
                        oPlay1.play();
                    }
                }
                $("#wanglan").val('');
            } else if (renFocus == true) {
                $(".query-btn").click();
                oPlay0.play();
            }
            //要做的事情
        }
    };
    window.onload = function () {
        $("#ruanjian").focus();
    }


</script>
</html>